<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  {% block meta %}{% endblock %}
  <title>
    {% if title %}
    {{ title }}
    {% else %}
    项目列表
    {% endif %}
  </title>
  <!-- 提示 -->
  <link rel="stylesheet" href="/third-party/PostbirdAlertBox.js/css/postbirdAlertBox.min.css">
  <script type="text/javascript" src="/third-party/PostbirdAlertBox.js/js/postbirdAlertBox.min.js"></script>
  <!-- 通知 -->
  <link rel="stylesheet" href="/third-party/spop-gh-pages/dist/spop.min.css">
  <script type="text/javascript" src="/third-party/spop-gh-pages/dist/spop.min.js"></script>
  <style>
    body{
      padding: 0;
      margin: 0;
    }
    /* 修改弹窗样式 */
    .postbird-box-text{
      padding: 0 8% 50px 8%;
      line-height: normal;
      font-size: medium;
    }
    /* 弹窗样式修改完成 */
    
    /* 按钮样式 */
    .btn{
      display: inline-block;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
    }
    .btn.focus,
    .btn:focus,
    .btn:hover {
      color: #333;
      text-decoration: none;
    }
    .btn-block {
      display: block;
      width: 100%;
    }
    .btn-default{
      color: #333;
      background-color: #fff;
      border-color: #ccc;
    }
    .btn-default:hover {
      color: #333;
      background-color: #e6e6e6;
      border-color: #adadad;
    }
    .btn-default:hover:active{
      color: #333;
      background-color: #d4d4d4;
      border-color: #8c8c8c;
    }
    .btn-primary {
      color: #fff;
      background-color: #337ab7;
      border-color: #2e6da4;
    }
    .btn-primary:hover {
      color: #fff;
      background-color: #286090;
      border-color: #204d74;
    }
    .btn-primary:hover:active{
      color: #fff;
      background-color: #204d74;
      border-color: #122b40;
    }
    .btn-danger {
      color: #fff;
      background-color: #d9534f;
      border-color: #d43f3a;
    }
    .btn-danger:hover {
      color: #fff;
      background-color: #c9302c;
      border-color: #ac2925;
    }
    .btn-danger:hover:active{
      color: #fff;
      background-color: #ac2925;
      border-color: #761c19;
    }
    /* end 按钮样式 */

    /* table */
    .table{
      width: 100%;
      border-collapse:collapse;
    }
    .table tr th{
      padding: 8px 0;
    }
    .table tr th,
    .table tr td{
      border: 1px solid #d4d4d4;
    }
    /* end table */

    /* form 表单样式 */
    .form-control{
      outline: none;
      display: block;
      width: 100%;
      height: 34px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
      -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
      transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .form-control:focus {
      border-color: #66afe9;
      outline: 0;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    }
    .form-inline{
      display: inline-block;
      width: auto;
      vertical-align: middle;
    }
    /* end 表单样式 */
  </style>
  {% block style %}{% endblock %}
  <!-- 需要在头部加载 js -->
  {% block headScript %}{% endblock %}
</head>

<body>
  {% block body %}{% endblock %}
  <!-- script -->
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
  <script>
    var vConsole = new VConsole();
  </script> -->
  <script type="text/javascript">
    /**
     * 消息提示
    */
    function messageNotifi(message) {
      if (!message) return;
      // 转换成对象
      if (typeof message === 'string') {
        message = JSON.parse(message);
      }
      spop({
        template: message.msg,
        position: 'top-center',
        style: message.type || 'info',
        autoclose: 5000
      });
    }
    // messageNotifi({{ (messages | dump) | safe }});
    messageNotifi('{{ (messages | dump) | safe }}');
  </script>
  {% block script %}{% endblock %}
</body>

</html>